<template>
    <n-breadcrumb class="px-12px">
        <template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.key">
            <n-breadcrumb-item>
                <n-dropdown
                    v-if="breadcrumb.hasChildren"
                    :options="breadcrumb.options"
                    @select="dropdownSelect"
                >
                    <span>
                        <component
                            :is="breadcrumb.icon"
                            v-if="theme.header.crumb.showIcon"
                            class="inline-block align-text-bottom mr-4px text-16px"
                        />
                        <span>{{ breadcrumb.label }}</span>
                    </span>
                </n-dropdown>
                <template v-else>
                    <component
                        :is="breadcrumb.icon"
                        v-if="theme.header.crumb.showIcon"
                        class="inline-block align-text-bottom mr-4px text-16px"
                        :class="{ 'text-#BBBBBB': theme.header.inverted }"
                    />
                    <span :class="{ 'text-#BBBBBB': theme.header.inverted }">
                        {{ breadcrumb.label }}
                    </span>
                </template>
            </n-breadcrumb-item>
        </template>
    </n-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { routePath } from '@/router'
import { useRouteStore, useThemeStore } from '@/store'
import { useIconRender, useRouterPush } from '@/composables'
import { getBreadcrumbByRouteKey } from '@/utils'
import { $t } from '@/locales'

defineOptions({ name: 'GlobalBreadcrumb' })

const route = useRoute()
const theme = useThemeStore()
const routeStore = useRouteStore()
const { routerPush } = useRouterPush()

const breadcrumbs = computed(() => {
    let data = getBreadcrumbByRouteKey(
        route.name as string,
        routeStore.menus as App.GlobalMenuOption[],
        routePath('root')
    )
    if (!data.length) {
        //没有匹配的菜单，可能就是内置页面，就根据route生成一个
        let item: App.GlobalBreadcrumb = {
            key: route.name as string,
            label: route.meta.title as string,
            routeName: route.name as string,
            disabled: true,
            hasChildren: false
        }
        if (route.meta.icon) {
            const { iconRender } = useIconRender()
            if (route.meta.icon.startsWith('local:')) {
                item.icon = iconRender({
                    localIcon: route.meta.icon.replace('local:', '')
                })
            } else {
                item.icon = iconRender({ icon: route.meta.icon })
            }
        }
        data.push(item)
    }
    data.map((item) => ({
        ...item,
        label: item.i18nTitle ? $t(item.i18nTitle) : item.label,
        options: item.options?.map((oItem) => ({
            ...oItem,
            label: oItem.i18nTitle ? $t(oItem.i18nTitle) : oItem.label
        }))
    }))
    return data
})

function dropdownSelect(key: string) {
    routerPush({ name: key })
}
</script>

<style scoped></style>
